<template>
	<!-- 商家的卡片 -->
	<view class="contents">
		<view class="third">
			<view class="img_url">
				<u-avatar size="100" :src="src" shape="shape"></u-avatar>
			</view>
			<view class="user_space">
				<view class="username">
					龙岩学院照相馆
				</view>
				<view style="font-size: 13px; display: flex; justify-content: space-between; margin-top: 10px;">
					<view>
						擅长风格：简约照
					</view>
					<view>
						性别：男
					</view>
				</view>
				<view style="font-size: 13px; margin-top: 10px; width: 75px;">
					<u-tag size="minu" text="档期查看" type="warning" icon="clock" plain
						@click="showCalendar = true"></u-tag>
				</view>
				<c-calendar title="档期查看" :formatter="formatter" :show="showCalendar" :readonly=true @close="close"
					ref="calendar" />
			</view>
		</view>
		<u-line color="#2979ff" length="95%" margin="5px"></u-line>
		<view class="" style="font-size: 20px;padding: 10px;">
			商家介绍
		</view>
		<!-- 商家介绍 -->
		<view class="intrduction">
			<view class="notices">
				公告:{{notice}}
			</view>
		</view>
		<u-line color="#2979ff" length="95%" margin="5px"></u-line>
		<view class="" style="font-size: 20px;padding: 10px;">
			写真样片
		</view>
		<!-- 写真样片 -->
		<view class="next">
			<view class="u-page">
				<scroll-view style="width: 100%;" scroll-x="true">
					<view style="display: flex;flex-direction: row;flex-wrap: nowrap;">
						<u-album multipleSize='90' style="display: flex;flex-direction: row;flex-wrap: nowrap;"
							:urls="urls2" :rowCount='rows'></u-album>
					</view>
				</scroll-view>
			</view>
			<!-- 套餐概览 -->
			<view class="package">
				<view class="title">
					<text>套餐概览<text style="font-weight:500;">（{{photoTakingPackageList.packageType}})</text></text>
				</view>
				<view class="conent">
					<view class="shotCount">
						<view class="icon">
							<u-icon name="camera" color="#707070" size="32"></u-icon>
						</view>
						<view class="right">
							<view class="subTitle">
								拍摄张数
							</view>
							<view class="count">
								{{photoTakingPackageList.shotCount}}张
							</view>
						</view>
					</view>
					<view class="shotCount">
						<view class="icon">
							<u-icon name="cut" color="#707070" size="32"></u-icon>
						</view>
						<view class="right">
							<view class="subTitle">
								精修张数
							</view>
							<view class="count">
								{{photoTakingPackageList.refinementCount}}张
							</view>
						</view>
					</view>
					<view class="shotCount">
						<view class="icon">
							<u-icon name="coupon" color="#707070" size="32"></u-icon>
						</view>
						<view class="right">
							<view class="subTitle">
								底片
							</view>
							<view class="count">
								赠送{{photoTakingPackageList.negativeFilm}}张
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="font-size: 20px;padding-top: 10px;padding-left: 10px;">
			证件照样片
		</view>
		<!-- 证件照样片 -->
		<view class="next">
			<view class="u-page">
				<scroll-view style="width: 100%;" scroll-x="true">
					<view style="display: flex;flex-direction: row;flex-wrap: nowrap;">
						<u-album multipleSize='90' style="display: flex;flex-direction: row;flex-wrap: nowrap;"
							:urls="urls2" :rowCount='rows'></u-album>
					</view>
				</scroll-view>
			</view>
			<!-- 套餐概览 -->
			<view class="package">
				<view class="title">
					<text>套餐概览<text style="font-weight:500;">（{{idPhotoPackageList.packageType}})</text></text>
				</view>
				<view class="conent">
					<view class="shotCount">
						<view class="icon">
							<u-icon name="camera" color="#707070" size="32"></u-icon>
						</view>
						<view class="right">
							<view class="subTitle">
								拍摄张数
							</view>
							<view class="count">
								{{idPhotoPackageList.shotCount}}张
							</view>
						</view>
					</view>
					<view class="shotCount">
						<view class="icon">
							<u-icon name="cut" color="#707070" size="32"></u-icon>
						</view>
						<view class="right">
							<view class="subTitle">
								精修张数
							</view>
							<view class="count">
								{{idPhotoPackageList.refinementCount}}张
							</view>
						</view>
					</view>
					<view class="shotCount">
						<view class="icon">
							<u-icon name="coupon" color="#707070" size="32"></u-icon>
						</view>
						<view class="right">
							<view class="subTitle">
								底片
							</view>
							<view class="count">
								赠送{{idPhotoPackageList.negativeFilm}}张
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="buttom">
			<u-row justify="space-between" gutter="10">
				<u-col span="3">
					<view class=""><u-button type="primary" size="small" text="关注"></u-button></view>
				</u-col>
				<u-col span="3">
					<view class=""><u-button type="success" @click="showCard" size="small" text="联系"></u-button>
					</view>
				</u-col>
				<u-col span="3">
					<view class=""><u-button type="error" @click="goOrder" size="small" text="约拍"></u-button></view>
				</u-col>

			</u-row>
		</view>

		<!-- 往期作品 -->
		<view class="previousWorks">
			<view class="title">往期作品</view>
			<!-- 小红书界面组件 -->
			<copyRedBook :list="list" style="padding: 0;"></copyRedBook>
		</view>

		<!-- 弹窗联系卡 -->
		<template>
			<u-popup closeable @close="closeCard()" :show="cardState" mode="bottom">
				<view class="dialogCard">
					<view class="photoText">电 话：12345678910</view>
					<view class="wxText">
						<text>微 信：</text>
						<u--image :src="list3[0]" width="80px" height="80px" shape="square"></u--image>
					</view>
					<u-button text="平台消息联系" type="primary" @click="contactShop(1)"></u-button>
				</view>
			</u-popup>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 套餐概览（写真）
				photoTakingPackageList: {
					// 套餐类型
					packageType: '写真',
					// 拍摄张数
					shotCount: 60,
					// 精修张数
					refinementCount: 6,
					// 底片
					negativeFilm: 6,
				},
				// 套餐概览（证件照）
				idPhotoPackageList: {
					// 套餐类型
					packageType: '证件照',
					// 拍摄张数
					shotCount: 60,
					// 精修张数
					refinementCount: 6,
					// 底片
					negativeFilm: 6,
				},
				list: [{
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, ],
				rows: 9,
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				urls2: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				notice: '曲曲折折的荷塘上面，弥望旳是田田的叶子。叶子出水很高，像亭亭旳舞女旳裙。层层的叶子中间，零星地点缀着些白花，有袅娜(niǎo,nuó)地开着旳，有羞涩地打着朵儿旳;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。',
				src: 'https://img.tukuppt.com/png_preview/00/16/95/BqEFyXvQtr.jpg!/fw/780',
				detailModel: false,
				cardState: false,
				// 日历卡片显示
				showCalendar: false
			}
		},
		methods: {
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if ((day.month === month && day.day >= date) || day.month > month) {
					/* 规则：查看源码 {@link /components/c-calendar/month.vue line 21}*/
					day.zao = Math.round(Math.random())
					day.zhong = Math.round(Math.random())
					day.wan = Math.round(Math.random())
				}
				return day
			},
			// 关闭日期卡
			close() {
				this.showCalendar = false
			},
			//下单
			goOrder() {
				uni.navigateTo({
					url: '/pages/map/AutonomouslyOrders'
				})
			},
			// 展示联系方式
			showCard() {
				this.cardState = true
			},
			closeCard() {
				this.cardState = false
			},
			// 平台联系商家
			contactShop(id) {
				uni.navigateTo({
					url: `/pages/message/messageroom/messageroom?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		/* background-color: #f5f5f5; */
	}

	.buttom {
		width: 90%;
		margin: 15px;

	}

	.next {
		margin: 10px;
		/* border: 1px solid lightgray; */
		border-radius: 8px;
	}

	.notices {
		padding: 10px;
		padding-top: 0;
		font-size: 12px;
	}

	.contents {
		display: flex;
		flex-direction: column;
		background-color: white;
		justify-content: center;
	}

	.third {
		background-color: white;
		width: 95%;
		display: flex;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: space-between;
		margin-bottom: 5px;
		margin: 5px;
		border-radius: 8px;
	}

	.img_url {
		width: 100px;
		height: 100px;
		border-radius: 25px;
		margin: 10px;
		/* margin-left: 5px; */
	}

	.user_space {
		width: 70%;
		margin-left: 5px;
		font-size: 24px;
	}

	.dialogCard {
		height: 500rpx;
		width: 720rpx;
		padding: 50rpx;
		box-sizing: border-box;

		.photoText {
			font-size: $uni-font-size-lg;
			margin: 20rpx 0;
		}

		.wxText {
			display: flex;
			justify-content: left;
			align-items: center;
			font-size: $uni-font-size-lg;
			margin: 20rpx 0;
			margin-bottom: 50rpx;
		}




	}

	.previousWorks {
		background-color: $uni-bg-color;

		.title {
			font-size: $uni-font-size-lg;
			font-weight: 900;
			padding-left: 20rpx;

		}

	}

	.package {
		margin-top: 20rpx;

		.title {
			font-size: $uni-font-size-lg;
			font-weight: 900;
		}

		.conent {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			.shotCount {
				display: flex;
				align-items: center;
				padding: 0 30rpx;

				.icon {
					margin-right: 16rpx;
				}

				.right {
					display: flex;
					flex-direction: column;

					font-size: $uni-font-size-sm;

					.subTitle {
						color: #7a7a7a;
					}

					.count {
						margin-top: 8rpx;
						color: #000;
						font-weight: 900;
					}
				}
			}
		}
	}
</style>